/* eslint-disable no-undef */
import React from 'react'

import { TabBar } from 'antd-mobile';

import './index.css'

export class MyTabBar extends React.Component {
  
   get selectedTab(){
     return this.props.location.pathname
   }
  
  render() {
    return (
      <TabBar
        tintColor="#21b97a"
        barTintColor="white"
        noRenderContent
      >
        {this.props.tabBar.map(i => (
          <TabBar.Item
            icon={<i className={`iconfont icon-${i.icon}`}></i>}
            selectedIcon={<i className={`iconfont icon-${i.icon}`}></i>}
            title={i.title}
            key={i.path}
            selected={this.selectedTab === i.path}
            onPress={() => {
             
                 // 跳转到被点击 tab 的路由。
              this.props.history.push(i.path);
            }}
          />
        ))}

      </TabBar>

    );
  }
}